<template>
	<view class="tools_robot">
		<scroll-view class="robot_container" :style="{height: scrollHeight}" scroll-y="true" :scroll-top="scrollTop" :scroll-into-view="toViewId">
			<view v-for="(item, index) in dataList" :key="index" :id="'card_'+index" class="card" :class="item.type">
				<view v-if="item.type === 'loading'" class="card_item" :class="item.type">
					<img :src="item.msg" alt="" />
				</view>
				<view v-else class="card_item" :class="item.type">
					{{item.msg}}
				</view>
			</view>
			<view id="card_end">-</view>
		</scroll-view>
		<view class="robot_input">
			<input class="input" @keyboardheightchange="keyboardheightchangeFn" confirm-type="search" @confirm="send" placeholder="请输入" v-model="inputVal" />
		</view>
	</view>
</template>

<script>
	import {
		getRobotInfo
	} from '@/apis/robot.js';

	export default {
		data() {
			return {
				inputVal: '',
				dataList: [],
				scrollTop: 0, // 滚动条距离顶部的距离
				toViewId: '',
				timerId: null,
				focusStatus: false,
				blurStatus: false,
				keyboardHeight: 0,
				scrollHeight: `calc(100vh - 150rpx)`
			}
		},
		onReady() {
			this.initQuery('你好！')
		},
		beforeDestroy() {
			clearTimeout(this.timerId)
			this.timerId = null
		},
		methods: {
			// keyboardheightchangeFn(e){
			// 	console.log('高度变化', e.detail.height);
			// 	this.keyboardHeight = e.detail.height;
			// 	if(this.keyboardHeight > 0 ) {
			// 		this.scrollHeight = `calc(100vh - 150rpx - ${this.keyboardHeight}px)`;
			// 	} else {
			// 		this.scrollHeight = `calc(100vh - 150rpx)`;
			// 	}
			// },
			// 主动发送消息
			send() {
				if (this.inputVal) {
					this.initQuery(this.inputVal)
					this.inputVal = ''; // 发送之后清空
				}
			},
			// 根据当前的loading状态处理loading 效果
			dealLoadingMsg(loading) {
				if(loading) {
					this.dataList = [...this.dataList, {
						type: 'loading',
						msg: '/static/image/tools/loading.gif'
					}]
				} else {
					let newArr = this.dataList;
					newArr.pop();
					this.dataList = [...newArr];
				}
			},			// 初始化uery
			initQuery(paramsVal) {
				this.dataList = [...this.dataList, {
					type: 'ask',
					msg: paramsVal
				}]
				this.dealLoadingMsg(true)
				getRobotInfo(paramsVal).then(res => {
					console.log('获取机器人会话结果 ======>', res)
					this.dealLoadingMsg(false)
					const content = res?.choices[0]?.message?.content || ''
					this.dataList = [...this.dataList, {
						type: 'answer',
						msg: content
					}]
					this.scrollIntoView(this.dataList.length)
				}).catch(err => {
					this.dealLoadingMsg(false)
				})
			},
			// 最后一个元素滚动到视野范围内
			scrollIntoView(listLenth) {
				this.toViewId = 'card_end'
				this.timerId = setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					// 动态计算滚动距离并设置scrollTop的值
					uni.createSelectorQuery().in(this).select(`#card_end`).boundingClientRect(res => {
						console.log('res ====', res)
						this.scrollTop = res.top; // 设置滚动条距离顶部的距离
					}).exec();
				}, 300)
			}
		}
	}
</script>

<style lang="scss">
	.tools_robot {
		background-color: #f7f7f7;
		height: 100vh;
	}

	.robot_container {
		// height: calc(100% - 150rpx);
		overflow: scroll;
		display: flex;
		flex-direction: column;
		
		.card_emty {
			flex: 1;
			display: none;
		}

		.card {
			margin: 16rpx 20rpx 16rpx 20rpx;
			font-size: 15px;
			line-height: 44rpx;
			display: flex;
			
			&.loading{
				justify-content: flex-start;
				
				.card_item {
					max-width: 80%;
					border-radius: 0 20rpx 20rpx 20rpx;
					padding: 24rpx 60rpx;
					background-color: #ffffff;
					color: #000000;
					box-shadow: 0px 0px 1px 0px #1d1e1f;
					img{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			&.ask {
				justify-content: flex-end;

				.card_item {
					max-width: 80%;
					border-radius: 20rpx 0 20rpx 20rpx;
					padding: 24rpx 30rpx;
					background-color: #548bf6;
					color: #fff;
					box-shadow: 0px 0px 1px 0px #1d1e1f;
				}
			}

			&.answer {
				justify-content: flex-start;

				.card_item {
					max-width: 80%;
					border-radius: 0 20rpx 20rpx 20rpx;
					padding: 24rpx 30rpx;
					background-color: #ffffff;
					color: #000000;
					box-shadow: 0px 0px 1px 0px #1d1e1f;
				}
			}
			&:last-child {
				margin-bottom: 100rpx;
			}
		}
		
		#card_end{
			height: 200rpx;
			width: 100%;
			line-height: 200rpx;
			color: #f7f7f7;
			opacity: 0;
		}
	}

	.robot_input {
		height: 150rpx;
		background-color: #ffffff;
		padding: 25rpx 30rpx 45rpx 30rpx;
		display: flex;
		flex-direction: row;

		.input {
			height: 80rpx;
			background-color: #f5f5f5;
			border-radius: 12rpx;
			padding: 0 20rpx;
			width: 100%;
		}
	}
</style>